<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山和太阳</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/rough.js/3.1.0/rough.es5.js"></script>
</head>
<body>
    <canvas width="500" height="500"></canvas>

    <script>

        // const rc = rough.canvas(document.querySelector('canvas'))

        // const hillOpts = {
        //     roughness: 2.8,
        //     strokeWidth: 2,
        //     fill: 'blue'
        // }


        // rc.path('M76 256L176 156L276 256', hillOpts)
        // rc.path('M236 256L336 156L436 256', hillOpts)

        // rc.circle(256, 106, 105, {
        //     stroke: 'red',
        //     strokeWidth: 4,
        //     fill: 'rgba(255, 255, 0, 0.4)',
        //     fillStyle: 'solid'
        // })


        // 原生canvas
        const canvas = document.querySelector('canvas')
        const ctx = canvas.getContext('2d')
        ctx.beginPath()
        ctx.moveTo(76,256)
        ctx.lineTo(176,156)
        ctx.lineTo(276,256)
        ctx.closePath()
        ctx.stroke()    
        // ctx.closePath()

        ctx.beginPath()

        ctx.moveTo(236, 256)
        ctx.lineTo(336, 156)
        ctx.lineTo(436, 256)
        ctx.closePath()
        ctx.stroke()

        
        ctx.beginPath()
        ctx.arc(256,106, 105, 0, 2 * Math.PI)
        ctx.stroke()

    </script>
</body>
</html>